<template>
  <div>
    <el-select v-model="value" placeholder="请选择" @change="GetData" class="custom-select">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <div ref="charts" :style="{ width: '100%', height: '400px' }"></div>
    <div class="card">
      <div class="indent">
        从2022年6月份到2024年4月份，我国新能源汽车销量稳中有进，月销量稳定在30-40万辆。考虑到国际原油价格的降低与充电桩设施的增加，未来新能源汽车销量还会有升有降，但整体的销量趋势是增长的。
      </div>
    </div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
  name: 'TaskOne',
  data() {
    return {
      options: [{
        value: '1',
        label: 'LSTM(单参数)'
      }, {
        value: '2',
        label: 'LSTM(多参数)'
      }, {
        value: '3',
        label: 'GM'
      }],
      value: '',
      chartInstance: null, // ECharts 实例
      option: { // ECharts 配置项
        title: {
          text: '全国新能源汽车销售趋势曲线图', // 修改标题
          left: 'center',
        },
        tooltip: {},
        xAxis: {
          name: '月份', // 添加X轴名称
          data: ["点1", "点2", "点3", "点4", "点5"],
          axisLabel: { // 添加X轴标签
            show: true,
            interval: 0, // 显示所有标签
            rotate: 45, // 旋转标签以适应空间
          }
        },
        yAxis: {
          name: '销售额', // 添加Y轴名称
          axisLabel: { // 添加Y轴标签
            show: true
          }
        },
        series: [{
          name: '销售数据',
          type: 'line', // 继续使用 'line' 类型，ECharts 默认平滑曲线
          smooth: true, // 开启平滑曲线
          data: [820, 932, 901, 934, 1290]
        }]
      }
    };
  },
  mounted() {
    this.GetData()
  },
  methods: {
    GetData() {
      console.log(this.value)
      let getoptions = {
        method: 'GET',
        url: '/api/task1/algorithm',
        params: {
          name: this.value
        }
      }
      axios.request(getoptions).then((res) => {
        console.log(res)
        this.option.xAxis.data = res.data.data.dates
        this.option.series[0].data = res.data.data.saleCounts
        let seriesData = this.option.series[0].data;
        let length = seriesData.length;

        // 如果数据长度小于6，则不需要进行任何额外操作
        if (length > 26) {
          // 定义一个函数来判断是否应用红色
          const getColor = (index) => {
            // 如果索引在最后六个范围内，返回红色，否则返回null让ECharts使用默认或已有的颜色配置
            return index >= length - 6 ? 'red' : 'blue';
          };

          // 重写或初始化series的itemStyle以应用我们的颜色逻辑
          this.option.series[0].itemStyle = {
            color: (params) => getColor(params.dataIndex)
          };
        }
        console.log(res.data.data.dates)
        //console.log(res.data.data.saleCounts)
        //
        this.chartInstance = echarts.init(this.$refs.charts); // 使用 this.$refs.charts 获取 DOM 元素  
        this.chartInstance.setOption(this.option);
      }).catch(function (error) {
        console.error(error);
      })
    },
  }
};
</script>


<style>
.card {
  background-color: rgb(221, 218, 218);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 10px;
  flex-grow: 1;
  /* 让卡片自动填充容器宽度 */
  /* 如果需要限制卡片最大宽度以防止过度拉伸，可以添加如下属性：
  max-width: 25%; // 或者根据实际需要设定其他百分比
  */
  display: flex;
  flex-direction: column;
  /* 保证卡片内部元素垂直排列 */
}

.custom-select {
  background-color: #fafcfb;
  /* 自定义背景色 */
  width: 200px;
  /* 自定义宽度 */
  height: 100px;
}

/* 选中项的背景色 */
.el-select-dropdown__item.is-active {
  background-color: #409eff;
  /* 自定义选中项背景色 */
  color: #52a9f0;
  /* 选中项字体颜色 */
}
</style>